<template>
  <div id="digital-flop">
    <div
      v-for="item in digitalFlopData"
      :key="item.title"
      class="digital-flop-item"
    >
      <div class="digital-flop-title ">{{ item.title }}</div>
      <div class="digital-flop">
        <dv-digital-flop class="animated bounce"
          :config="item.number"
        />
        <div class="unit " style="color:#4d99fc;">{{ item.unit }}</div>
      </div>
    </div>
    <dv-decoration-10/>
  </div>
</template>

<script>
export default {
  name: 'basicInfo',
  props: {
    selectBasics: {
      type: Object,
      default: () => Object
    }
  },
  data () {
    return {
      digitalFlopData: [],
      basicInfo: {}
    }
  },
  watch: {
    selectBasics (newV, oldV) {
      this.basicInfo = newV
      this.createData()
    }
  },
  mounted () {
    this.basicInfo = this.selectBasics
    // setInterval(createData, 30000)
  },
  methods: {
    createData () {
      //  const { randomExtend } = this

      this.digitalFlopData = [
        {
          title: '总门架数',
          number: {
            // number: [randomExtend(20000, 30000)],
            number: [this.basicInfo.bayonetNum],
            content: '{nt}',
            textAlign: 'center',
            style: {
              fill: '#ffffff',
              fontWeight: 'bold'
            }
          },
          unit: '（个）'
        },
        {
          title: '收费站',
          number: {
            // number: [randomExtend(5, 10)],
            number: [this.basicInfo.tollbothNum],
            content: '{nt}',
            textAlign: 'center',
            style: {
              fill: '#ffffff',
              fontWeight: 'bold'
            }
          },
          unit: '(个)'
        }

      ]
    },
    randomExtend (minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10)
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
      }
    }
  }
}
</script>

<style lang="less">
  #digital-flop {
    position: relative;
    height: 58%;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(6, 30, 93, 0.5);

    .dv-decoration-10 {
      position: absolute;
      width: 95%;
      left: 2.5%;
      height: 5px;
      bottom: 0px;
    }

    .digital-flop-item {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-left: 3px solid rgb(6, 30, 93);
      border-right: 3px solid rgb(6, 30, 93);
    }

    .dv-digital-flop {
      height: 45px;
      width: 100px;
    }

    .digital-flop-title {
      font-size: 20px;
      margin-bottom: 20px;
      color: #fff;
    }

    .digital-flop {
      display: flex;
    }

    .unit {
      margin-left: -10px;
      display: flex;
      align-items: flex-end;
      box-sizing: border-box;
      padding-bottom: 13px;
      color: #f07604;
      text-align: center;
    }
  }
</style>
